
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
            当前位置：
            <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
            <router-link to="/order_productionzdsc" style="color: #409eff;">自动生产订单</router-link>>
            异常订单自动处理
          </div>
		  <div class="hei10"></div>

				<div class="t_title">异常订单自动处理</div>

				<!-- 搜素 -->
				<div class="t_search_all">
					<div class="t_search_box">
						<div class="t_search_title">接口渠道:</div>
						<el-select
						v-model="searchform.channel_id"
						clearable  placeholder="请选择接口渠道">
							<el-option
							v-for="(item,index) in qdList"
							:key='index'
							:label="item.user_defined_name" :value="item.channel_id"></el-option>
						</el-select>
						<el-button style="margin-left:20px" round type="danger" @click="getlist">搜索</el-button>
					</div>
				</div>
				<el-table
				:data="tabledata"
				style="width: 90%;margin-left: auto;margin-right: auto;margin-top: 20px;">
					<el-table-column
						prop="reason"
						label="异常原因">
					</el-table-column>
					<el-table-column
						prop="user_defined_name"
						label="所属接口渠道">
					</el-table-column>
					<el-table-column
						prop="created_at"
						label="添加时间">
					</el-table-column>
					<el-table-column
						prop="operate_name"
						label="自动处理方式">
					</el-table-column>
					<el-table-column
						label="操作">
						<template slot-scope="scope">

							<el-button @click="change(scope.row.id,scope.row.operate)" type="text" size="small">修改</el-button>
							<el-button @click="deletitem(scope.row.id)" type="text" size="small" style="color: #2974FF;">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style="text-align: center;margin-top:20px">
					<el-pagination
						@current-change = 'pagechange'
						layout="prev, pager, next"
						:total="total">
					</el-pagination>
				</div>

			</div>
		</div>
		<!-- <foot></foot> -->
		<el-dialog
		title="确认订单生产失败"
		:visible.sync="changetype"
		width="500px">
		<el-select style="width: 100%;" v-model="valuechoose" placeholder="请选择">
			<el-option
			v-for="item in options"
			:key="item.value"
			:label="item.label"
			:value="item.value">
			</el-option>
		</el-select>
		<span slot="footer" class="dialog-footer">
			<el-button @click="changetype = false">取 消</el-button>
			<el-button type="primary" @click="changesure">确 定</el-button>
		</span>
		</el-dialog>
	</div>
</template>

<script>


import top from "@/components/top.vue";
import left from "@/components/left.vue";
import foot from "@/components/foot.vue";
import UploadExcelComponent from "@/components/UploadExcel/index.vue";

import {
	regionData,
	CodeToText,
	TextToCode
} from 'element-china-area-data'
import axios from "axios";
import router from "@/router";
import moment from 'moment'

export default {
	components: {
		left: left,
		top: top,
		foot: foot,
		UploadExcelComponent,
	},
	data() {
		return {
			searchform: {
				channel_id:'',//渠道名
				page:1,//页码
				page_size:20//数量
			},
			//渠道下拉
			qdList:[],
			//数据
			tabledata:[],
			total:'',
			options: [],
			valuechoose: null,
			changetype:false,
			changeid:'',
		};
	},

	created() {
		//获取渠道下拉
		this.getqdselect()
		//获取列表
		this.getlist()
		//获取修改列表
		this.getchange()
	},
	methods: {
		//获取列表
		getlist(){
			axios.get('/api/plan-market/upstream/order/reason/list', {
				params: this.searchform
			})
				.then((response) => {
					console.log(response)
					this.tabledata = response.data.data.data
					this.total = response.data.data.total
				})
		},
		//获取修改列表
		getchange(){
			axios.get('/api/plan-market/get/operate/list')
				.then((response) => {

					var arr = Object.entries(response.data)
					for(var i = 0;i<arr.length;i++){
						this.options.push({value:arr[i][0],label:arr[i][1]})
					}
					console.log(this.options)
				})
		},
		//获取渠道下拉
		getqdselect() {
			axios.get('/api/plan-market/upstream/channel/config/list', {
				params: {
					'y_name':'c_name'
				}
			})
				.then((response) => {

					console.log(response.data.data)
					this.qdList=response.data.data

				})
		},
		//分页
		pagechange(val){
			console.log(val)
			this.searchform.page = val
			this.getlist()
		},
		// 修改
		change(id,operate){
			this.changeid = id
			this.changetype = true
			this.valuechoose = operate.toString()
			console.log(this.valuechoose)
		},
		//确认修改
		changesure(){
			// this.$confirm('是否确认修改?', '提示', {
			// 	confirmButtonText: '确定',
			// 	cancelButtonText: '取消',
			// 	type: 'warning'
			// }).then(() => {

			// }).catch(() => {
			// 	this.$message({
			// 		type: 'info',
			// 		message: '已取消'
			// 	});
			// });
			axios.post("/api/plan-market/upstream/order/reason/save", {
						id:this.changeid,
						operate:this.valuechoose,
				}).then((response)=>{
					this.$message({
						type: 'success',
						message: '修改成功!'
					});
					this.changetype = false
					this.getlist()
				})
		},
		//删除
		deletitem(id){
			this.$confirm('是否确认删除?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
			}).then(() => {
				axios.post('/api/plan-market/upstream/order/reason/delete', {
						id:id
					})
					.then((response) => {
						console.log(response)
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.getlist()
					})

			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消'
				});
			});
		}
	},

};
</script>
<style scoped lang="scss">
 /deep/ .el-button--danger {
          color: #FFF;
          background-color: #2974FF;
          border-color: #2974FF;
      }

.t_title {
	background-color: #F9F9F9;
	color: #727272;
	padding: 15px 25px;
}

.t_search_all {
	display: flex;
	flex-wrap: wrap;
}

.t_search_box {
	display: flex;
	align-items: center;
	margin-right: 20px;
	margin-top: 20px;

}

.t_search_title {
	width: 100px;
	text-align: right;
	padding-right: 10px;
	color: #727272;
	font-size: 14px;
}

.t_search_allbtn {
	display: flex;
	align-items: center;
	margin-left: 40px;
	margin-top: 20px
}

/deep/ .t_search_allbtn .el-input__inner {
	height: 40px !important;
	line-height: 40px !important;
}

.t_item_top {
	background-color: #F3FAFF;
	color: #646464;
	font-size: 14px;
	padding: 15px;
	display: flex;
	justify-content: space-between;
}

.t_item_cont {
	display: flex;
	border: 1px solid #EEEEEE;
	font-size: 14px;
	color: #646464;

}

.t_item_cont .el-button {
	padding: 0 !important;
	font-size: 14px;

}

.t_item_box {
	border-right: 1px solid #EEEEEE;
	padding: 20px;
	line-height: 20px;
	box-sizing: border-box;
}

.t_content {
	padding: 15px;
}

.t_headbox {
	display: flex;
	background-color: #F9F9F9;
	color: #646464;
	font-size: 14px;
	padding: 15px 0;
	text-align: center;
}

.t_tab_box {
	display: flex;
	border-bottom: 2px solid #DCDCDC;
	color: #FF3B3B;
	align-items: center;
}

.t_gray_line {
	height: 16px;
	border: 1px solid #AEAEAE;
}

.t_tab_item {
	padding: 10px 20px;
	border-bottom: 2px solid white;
	cursor: pointer;
}

.t_tab_lei {
	border-bottom: 2px solid #FF3B3B;
}

.t_myform {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 10px
}

.t_cz_btnbox {
	/* display: flex;
	justify-content: end; */
	text-align: right;
}

.t_myform_title {
	width: 100px;
	text-align: right;
	padding-right: 5px;
}

.t_btn_box_all {
	display: flex;
}

/* /deep/ .t_btn_box_all .button_style {
	border: 1px solid #b3d8ff;
} */

/deep/ .t_btn_box_all #combtn .el-button--primary {
	color: #409EFF;
	background-color: #ecf5ff !important;
	border-color:#b3d8ff !important;
	padding:14px 20px !important

}
/* /deep/  .t_btn_box_all .order_production #drop .el-button--primary{
	border: 1px solid #b3d8ff;

} */

.reloadup {
	margin-left: 10px;
	margin-right: 10px;
}
.copyBtn {
		cursor: pointer;
		color: #409EFF;
		border: 1px #409EFF solid;
		padding: 5px;
		width: 160px;
		text-align: center;
		font-size: 14px;
		border-radius: 3px;
		margin-bottom: 20px;
	}
	.logflex {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;


		}
.logflex .el-button--primary {
				padding: 10px 30px;
			}
		.logflex div {
			width: 377px;
			text-align: center;
		}

		.logflex .proimg {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 265px;
			background: #eaeaea;
		}

		.logflex .proimg img {
			max-width: 100%;
			max-height: 100%;
		}
	.protitle {
			color: #197cff;
			cursor: pointer;
			margin-top: 10px;
		}
	/deep/.t_fybox .el-input__inner{
		height: 28px !important;
		line-height: 28px !important;
	}
</style>

